<template>
    <view class="main">
        <mx-navbar :title="'申请售后'"></mx-navbar>

        <view class="module">
            <view class="gtop">
                <view class="gtop-tit">
                    售后信息
                </view>
            </view>
            <view class="imglist">
                <view class="item" :key="index" v-for="(goods, index) in info.goods_list">
                    <image class="img-item" :src="$imgUrl + goods.image"></image>
                    <view class="item-text">
                        <view class="name">{{ goods.name }}</view>
                        <view class="spec text-limit-2" v-if="goods.mdl">
                            <text>已选：{{ goods.mdl }}</text>
                        </view>
                        <view class="num">
                            <view class="order-price">
                                <text class="n-price ">￥</text>{{ goods.original_price }}
                            </view>
                            <view>× {{ goods.count }}</view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="operate">
                <text class="olt" v-if="info.order_goods_count">共{{ info.order_goods_count }}件</text>
                <view class="product-details">
                    实退：<text class="pi">¥</text><text class="pn">{{ info.payment_amount }}</text></view>
            </view>
        </view>


        <view class="module mbo">
            <view class="form-cell">
                <view class="fl">
                    联系人
                </view>
                <view class="fr">
                    <input type="text" placeholder="请输入" v-model="name">
                </view>
            </view>
            <view class="form-cell">
                <view class="fl">
                    手机号
                </view>
                <view class="fr">
                    <input type="idcard" placeholder="请输入" v-model="mobile">
                </view>
            </view>
            <view class="form-cell">
                <view class="fl">
                    退款类型
                </view>
                <view class="fr">
                    <radio-group class="block" @change="changeType">
                        <view class="rgb flex align-center ">
                            <radio class="radio" :class="type == '1' ? 'checked' : ''"
                                :checked="type == '1' ? true : false" value="1">
                            </radio>
                            <text class="rgbt">仅退款</text>
                            <radio class="radio" :class="type == '2' ? 'checked' : ''"
                                :checked="type == '2' ? true : false" value="2">
                            </radio>
                            <text class="rgbt">退货退款</text>
                        </view>
                    </radio-group>
                </view>
            </view>

            <view class="form-cell address">
                <view class="fl fladdr">
                    退款理由
                </view>
                <view class="fr">
                    <textarea v-model="reason" maxlength="-1" placeholder="请输入"></textarea>
                </view>
            </view>
        </view>

        <mx-space height="130"></mx-space>


        <view class="btn-group">
            <view class="cun-btn round sub-btn" @click="submit">
                提交
            </view>
        </view>

    </view>
</template>

<script setup>
const {
    proxy
} = getCurrentInstance()
const data = reactive({
    sn: '',
    info: {},
    name: '',
    mobile: '',
    reason: '',
    type: 1
})
const { info, name, mobile, reason, type } = toRefs(data)

onLoad((options) => {
    data.sn = options.sn || ''
    getData()
})

async function getData() {
    let res = await proxy.$api('OrderDetail', {
        order_sn: data.sn
    })
    if (res.code === 0) {
        data.info = res.data
        data.name = res.data.addr_info.name
        data.mobile = res.data.addr_info.mobile
    }
}

function changeType(e) {
    data.type = e.detail.value
}

async function submit() {
    if(!data.name) {
        return proxy.$toast('请输入联系人')
    }
    if(!data.mobile) {
        return proxy.$toast('请输入手机号')
    }
    if(!data.reason) {
        return proxy.$toast('请输入退款理由')
    }
    let res = await proxy.$api('RefundApply', {
        order_sn: data.info.order_sn,
        type: data.type,
        name: data.name,
        mobile: data.mobile,
        reason: data.reason
    })
    if(res.code == 0) {
        proxy.$toast('申请成功').then(_=> {
            uni.redirectTo({
                url: `/pages-order/refund/detail?sn=${res.data.refund_sn}`
            })
        })
    }
}

</script>

<style lang="scss" scoped>
.module {
    // border-radius: 20rpx;
    background-color: #fff;
    padding: 30rpx;

    margin-bottom: 20rpx;

    .gtop {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #f0f1f3;
        margin-bottom: 24rpx;
        padding-bottom: 24rpx;

        .gtt {
            font-size: 24rpx;
        }

        .cuIcon {
            font-size: 24rpx;
        }

        .gtop-tit {
            display: flex;
            align-items: center;
            font-size: 28rpx;
            font-weight: bold;
            color: #000;

        }
    }

    .imglist {
        flex-grow: 1;
        overflow: hidden;
        text-align: left;

        .img-item {
            width: 176rpx;
            height: 176rpx;
            margin-right: 16rpx;
            flex-grow: 0;
        }

        .item {
            display: flex;
            width: 100%;
            border-bottom: 1px solid #f0f1f3;
            padding-bottom: 24rpx;
            margin-bottom: 24rpx;
            position: relative;

            &:last-child {
                // margin-bottom: 0;
                // border-bottom: none;
                // padding-bottom:0;
            }

            .item-text {
                flex: 1;
                position: relative;

                .name {
                    width: 100%;
                    display: -webkit-box;
                    overflow: hidden;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    text-overflow: ellipsis;
                    color: #1f1f1f;
                    font-size: 24rpx;
                    line-height: 36rpx;
                    margin-bottom: 10rpx;
                    padding: 2rpx 0;
                }

                .spec {
                    width: 100%;
                    color: #999999;
                    font-size: 22rpx;
                    position: relative;
                    margin-bottom: 10rpx;
                }

                .num {
                    display: flex;
                    justify-content: space-between;
                    flex: 1;
                    font-size: 24rpx;
                    position: absolute;
                    width: 100%;
                    bottom: 10rpx;
                    left: 0;

                    .order-price {
                        font-size: 28rpx;
                        color: #f00;

                        .n-price {
                            font-size: 20rpx;
                        }
                    }
                }
            }
        }
    }

    .operate {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .olt{
            font-size: 26rpx;
        }
        
        .product-details {
            flex: 1;
            // padding: 0 0 24rpx;
            text-align: right;
            font-size: 26rpx;
            color: #666;

            .pi {
                font-size: 20rpx;
                color: #f00;
            }

            .pn {
                font-size: 30rpx;
                color: #f00;
            }
        }

    }

}

.form-cell {
    width: 100%;
    height: 120rpx;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ececec;
    font-size: 26rpx;
}

.fl {
    width: 140rpx;
    line-height: 120rpx;

}
.fladdr{
    line-height: normal;
    padding-top: 40rpx;
}

.fr {
    flex: 1;
    position: relative;
}

.fr input {
    border: none;
    outline: none;
    width: 100%;
    height: 110rpx;
    line-height: 110rpx;
    // display: flex;
    // align-items: center;
}

.fr input:focus,
.fr input:active {
    border: none;
    outline: none;
}


.fr textarea {
    border: none;
    outline: none;
    width: 100%;
    padding-top: 40rpx;
}

.fr textarea:focus,
.fr textarea:active {
    border: none;
    outline: none;
}

.address {
    height: auto;
    align-items: flex-start;
}

.default-cell {
    border: none;
}

.rgbt {
    margin-right: 30rpx;
    margin-left: 10rpx;
}

.checked {
    color: $main_color;
}

.mbo {
    padding-bottom: 0;
}


.btn-group {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20rpx 30rpx;
    position: fixed;
    bottom: 0;
    background-color: #fff;
    z-index: 3;

}

.sub-btn {
    width: 100%;
	line-height: 90rpx;
	text-align: center;
	color: #fff;
	background-color: $main_color;
	// margin: 0 10rpx;
}
</style>